import React from 'react'
import "../style/style.scss"
import Header from '../components/header'
import Content from '../components/content'
import Footer from '../components/footer'
import {useEffect,useState} from "react"
import axios from "axios"
import Appson from './appson'
function App() {
  let [count,setCount] = useState(0)
  let [arr,setArr] = useState([])
  // useEffect 至少可以模拟类组件的三个周期
  useEffect(()=>{
      axios.get("/list").then(res=>{
        setArr(res.data)
      })
  },[])
  useEffect(()=>{
    console.log("countfasheng")
    return ()=>{ 
       console.log("我被卸载了");
    }
  },[count])
  
  let fn = ()=>{
     setCount(count=>count + 1)
  }
  // useefffect的第二个参数为空数组的时候，相当于componetDidmount
  // useEffcet 第二个参数有值得时候相当于compnentDidupdate，还可以理解为vue的watch
  // useEffect 中返回的函数相当于compontWillUnmount,组件卸载的生命周期
  return (
    <div className='appwrap'>
        <h4>{count}</h4>
        <button onClick={fn}>点击</button>
        <Appson></Appson>

      <hr />
       <Header></Header>
        {/* <div className='content'>
            {
              arr && arr.length ?   <Content arr={arr}></Content>:""
            }
        </div> */}
      
       <Footer></Footer>
    </div>
  )
}

export default App